import React from "react";
import "./spin.scss";
import Loading from "../icons/loading";

/**
 * @param spinning 是否显示加载中
 * @param size 加载图标
 * @param tip 描述文本
 * @param indicator 加载图标
 */
interface Props {
    spinning?: boolean,
    size?: "default" | "small" | "large",
    tip?: string,
    indicator?: React.ReactNode,
    children?: React.ReactNode
}

const sizeArr = ["large", "small"]

const Spin = ({ spinning = false, size = "default", tip = "123", indicator, children }: Props) => {
    return (
        <div className="pe-spin">
            {children}
            {
                spinning ? (
                    <div className="pe-spin-mask">
                        <div className={["pe-spin-center", sizeArr.includes(size) ? `pe-spin-${size}` : ""].join(" ").trim()}>
                            <div className="pe-spin-icon is-loading">
                                {
                                    indicator ? <>{indicator}</> : <Loading />
                                }
                            </div>
                            <span style={{ marginTop: 5 }}>{tip}</span>
                        </div>
                    </div>
                ) : null
            }
        </div>
    )
}

export default Spin